import React, {useEffect, useRef, useState} from 'react';
import {
  StyleSheet,
  View,
  Button,
  Animated,
  TouchableOpacity,
  Text,
  Easing,
} from 'react-native';

const initVal = {x: 0, y: 0};
const 四种动画组合9_9 = () => {
  const scale = useRef(new Animated.Value(1)).current;
  const marginLeft = useRef(new Animated.Value(0)).current;
  const marginTop = useRef(new Animated.Value(0)).current;

  return (
    <View style={styles.root}>
      <Button
        title="按钮"
        onPress={() => {
          const moveX = Animated.timing(marginLeft, {
            toValue: 100,
            duration: 500,
            useNativeDriver: false,
          });
          const moveY = Animated.timing(marginTop, {
            toValue: 200,
            duration: 500,
            useNativeDriver: false,
          });
          const scaleAnim = Animated.timing(scale, {
            toValue: 1.5,
            duration: 500,
            useNativeDriver: false,
          });

          // Animated.parallel([moveX, moveY, scaleAnim]).start();
          // Animated.sequence([moveX, moveY, scaleAnim]).start();
          // Animated.stagger(1500, [moveX, moveY, scaleAnim]).start();
          Animated.sequence([
            moveX,
            Animated.delay(1000),
            moveY,
            Animated.delay(500),
            scaleAnim,
          ]).start();
        }}
      />

      <Animated.View
        style={[
          styles.view,
          {
            transform: [
              {scale: scale},
              {translateX: marginLeft},
              {translateY: marginTop},
            ],
          },
        ]}
      />
    </View>
  );
};

export default 四种动画组合9_9;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 500,
    backgroundColor: 'white',
  },
  view: {
    width: 100,
    height: 100,
    backgroundColor: '#3050ff',
    marginTop: 20,
  },
  button: {
    marginLeft: 'auto',
    width: 200,
    height: 65,
    backgroundColor: '#2030FF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  txt: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
});
